<html>

<head>
    <title>Canvas tutorial</title>
    <!-- 基础画图 -->
    <!-- <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('tutorial');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');

                // ctx.fillStyle = 'rgb(200, 0, 0)'
                // ctx.fillRect(10, 10, 55, 50)

                // ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
                // ctx.fillRect(30, 30, 55, 50);

                // 三种绘制矩形的方法
                // ctx.fillRect(25, 25, 100, 100);
                // ctx.clearRect(45, 45, 60, 60);
                // ctx.strokeRect(50, 50, 50, 50);

                // 绘制三角形
                //当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点

                // ctx.beginPath();
                // ctx.moveTo(75, 50); //将笔触移动到指定的坐标x以及y上。
                // ctx.lineTo(100, 75);
                // ctx.lineTo(100, 25);
                // ctx.fill();


                //笑脸
                // ctx.beginPath();
                // ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
                // ctx.moveTo(110, 75);
                // ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
                // ctx.moveTo(65, 65);
                // ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
                // ctx.moveTo(95, 65);
                // ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
                // ctx.stroke();

                // 填充三角形
                // ctx.beginPath();
                // ctx.moveTo(25, 25);
                // ctx.lineTo(105, 25);
                // ctx.lineTo(25, 105);
                // ctx.fill();

                // // 描边三角形
                // ctx.beginPath();
                // ctx.moveTo(125, 125);
                // ctx.lineTo(125, 45);
                // ctx.lineTo(45, 125);
                // ctx.closePath();
                // ctx.stroke();

                //弧度展示
                // for (var i = 0; i < 4; i++) {
                //     for (var j = 0; j < 3; j++) {
                //         ctx.beginPath();
                //         var x = 25 + j * 50; // x 坐标值
                //         var y = 25 + i * 50; // y 坐标值
                //         var radius = 20; // 圆弧半径
                //         var startAngle = 0; // 开始点
                //         var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
                //         var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针

                //         ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

                //         if (i > 1) {
                //             ctx.fill();
                //         } else {
                //             ctx.stroke();
                //         }
                //     }
                // }

                // 二次贝塞尔曲线
                // ctx.beginPath();
                // ctx.moveTo(25, 25);
                // ctx.quadraticCurveTo(10, 50, 70, 70)
                // ctx.quadraticCurveTo(40, 50, 80, 40)
                // ctx.quadraticCurveTo(100, 40, 100, 70)
                // ctx.stroke();

                // ctx.beginPath();
                // ctx.moveTo(75, 25);
                // ctx.quadraticCurveTo(25, 25, 25, 62.5);
                // ctx.quadraticCurveTo(25, 100, 50, 100);
                // ctx.quadraticCurveTo(50, 120, 30, 125);
                // ctx.quadraticCurveTo(60, 120, 65, 100);
                // ctx.quadraticCurveTo(125, 100, 125, 62.5);
                // ctx.quadraticCurveTo(125, 25, 75, 25);
                // ctx.stroke();

                // 三次贝塞尔曲线
                // ctx.beginPath();
                // ctx.moveTo(75, 40);
                // ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
                // ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
                // ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
                // ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
                // ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
                // ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
                // ctx.fillStyle = 'rgba(255, 0, 0, 1)'
                // ctx.fill();

            }
        }
    </script> -->
    <!-- 吃豆豆 -->
    <!-- <script>
        function draw() {
            var canvas = document.getElementById('tutorial');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');

                roundedRect(ctx, 12, 12, 150, 150, 15);
                roundedRect(ctx, 19, 19, 150, 150, 9);
                roundedRect(ctx, 53, 53, 49, 33, 10);
                roundedRect(ctx, 53, 119, 49, 16, 6);
                roundedRect(ctx, 135, 53, 49, 33, 10);
                roundedRect(ctx, 135, 119, 25, 49, 10);

                ctx.beginPath();
                ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
                ctx.lineTo(31, 37);
                ctx.fill();

                for (var i = 0; i < 8; i++) {
                    ctx.fillRect(51 + i * 16, 35, 4, 4);
                }

                for (i = 0; i < 6; i++) {
                    ctx.fillRect(115, 51 + i * 16, 4, 4);
                }

                for (i = 0; i < 8; i++) {
                    ctx.fillRect(51 + i * 16, 99, 4, 4);
                }

                ctx.beginPath();
                ctx.moveTo(83, 116);
                ctx.lineTo(83, 102);
                ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
                ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
                ctx.lineTo(111, 116);
                ctx.lineTo(106.333, 111.333);
                ctx.lineTo(101.666, 116);
                ctx.lineTo(97, 111.333);
                ctx.lineTo(92.333, 116);
                ctx.lineTo(87.666, 111.333);
                ctx.lineTo(83, 116);
                ctx.fill();

                ctx.fillStyle = "white";
                ctx.beginPath();
                ctx.moveTo(91, 96);
                ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
                ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
                ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
                ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
                ctx.moveTo(103, 96);
                ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
                ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
                ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
                ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
                ctx.fill();

                ctx.fillStyle = "black";
                ctx.beginPath();
                ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
                ctx.fill();

                ctx.beginPath();
                ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
                ctx.fill();
            }
        }

        // 封装的一个用于绘制圆角矩形的函数.

        function roundedRect(ctx, x, y, width, height, radius) {
            ctx.beginPath();
            ctx.moveTo(x, y + radius);
            ctx.lineTo(x, y + height - radius);
            ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
            ctx.lineTo(x + width - radius, y + height);
            ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
            ctx.lineTo(x + width, y + radius);
            ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
            ctx.lineTo(x + radius, y);
            ctx.quadraticCurveTo(x, y, x, y + radius);
            ctx.stroke();
        }
    </script> -->
    <!-- 颜色 -->
    <!-- <script>
        // 实心方格
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');
        //     for (var i = 0; i < 8; i++) {
        //         for (var j = 0; j < 8; j++) {
        //             ctx.fillStyle = 'rgb(' + Math.floor(255 - 40 * i) + ',' +
        //                 Math.floor(255 - 40 * j) + ',0)';
        //             ctx.fillRect(j * 25, i * 25, 25, 25);
        //         }
        //     }
        // }
        // 空心圆框
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');
        //     for (var i = 0; i < 8; i++) {
        //         for (var j = 0; j < 8; j++) {
        //             ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
        //                 Math.floor(255 - 42.5 * j) + ')';
        //             ctx.beginPath();
        //             ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
        //             ctx.stroke();
        //         }
        //     }
        // }
        // 半透明圆
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');
        //     // 画背景
        //     ctx.fillStyle = '#FD0';
        //     ctx.fillRect(0, 0, 100, 100);
        //     ctx.fillStyle = '#6C0';
        //     ctx.fillRect(100, 0, 100, 100);
        //     ctx.fillStyle = '#09F';
        //     ctx.fillRect(0, 100, 100, 100);
        //     ctx.fillStyle = '#F30';
        //     ctx.fillRect(100, 100, 100, 100);
        //     ctx.fillStyle = '#FFF';

        //     // 设置透明度值
        //     ctx.globalAlpha = 0.2;

        //     // 画半透明圆
        //     for (var i = 0; i < 7; i++) {
        //         ctx.beginPath();
        //         ctx.arc(100, 100, 20 + 10 * i, 0, Math.PI * 2, true);
        //         ctx.fill();
        //     }
        // }
        // rgba展示
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');

        //     // 画背景
        //     ctx.fillStyle = 'rgb(255,221,0)';
        //     ctx.fillRect(0, 0, 200, 50);
        //     ctx.fillStyle = 'rgb(102,204,0)';
        //     ctx.fillRect(0, 50, 200, 50);
        //     ctx.fillStyle = 'rgb(0,153,255)';
        //     ctx.fillRect(0, 100, 200, 50);
        //     ctx.fillStyle = 'rgb(255,51,0)';
        //     ctx.fillRect(0, 150, 200, 50);

        //     // 画半透明矩形
        //     for (var i = 0; i < 10; i++) {
        //         ctx.fillStyle = 'rgba(255,255,255,' + (i + 1) / 10 + ')';
        //         for (var j = 0; j < 4; j++) {
        //             ctx.fillRect(5 + i * 19, 5 + j * 50, 19, 40)
        //         }
        //     }
        // }

        // 虚线动效
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');
        //     var offset = 0;

        //     function draw() {
        //         ctx.clearRect(0, 0, canvas.width, canvas.height);
        //         ctx.setLineDash([4, 2]);
        //         ctx.lineDashOffset = -offset;
        //         ctx.strokeRect(10, 10, 100, 100);
        //     }

        //     function march() {
        //         offset++;
        //         if (offset > 16) {
        //             offset = 0;
        //         }
        //         draw();
        //         setTimeout(march, 20);
        //     }

        //     march();
        // }

        // 填充规则
        // "nonzero": non - zero winding rule, 默认值.
        // "evenodd": even - odd winding rule. // 两个封闭图形外部相交区域
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');
        //     ctx.beginPath();
        //     ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
        //     ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
        //     ctx.fill("evenodd");
        // }

        // 文本
        // function draw() {
        //     var ctx = document.getElementById('words').getContext('2d');
        //     ctx.font = "48px serif";
        //     ctx.fillText("Hello world", 10, 50); // 填充区域 理解为画笔 第四个参数是文字运行的最大宽度
        // }

        //文本用当前的边框样式被绘制
        function draw() {
            var ctx = document.getElementById('words').getContext('2d');
            ctx.font = "48px serif";
            ctx.strokeText("Hello world", 10, 50); //绘制范围，理解为框框
        }
    </script> -->
    <!-- 引入图片，画折线图 -->
    <!-- <script>
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');
        //     var img = new Image();
        //     img.onload = function() {
        //         ctx.drawImage(img, 0, 0);
        //         ctx.beginPath();
        //         ctx.moveTo(30, 96);
        //         ctx.lineTo(70, 66);
        //         ctx.lineTo(103, 76);
        //         ctx.lineTo(170, 15);
        //         ctx.stroke();
        //     }
        //     img.src = '';
        // }
        //画多个图片
        // function draw() {
        //     var ctx = document.getElementById('tutorial').getContext('2d');
        //     var img = new Image();
        //     img.onload = function() {
        //         for (var i = 0; i < 4; i++) {
        //             for (var j = 0; j < 3; j++) {
        //                 ctx.drawImage(img, j * 50, i * 38, 50, 38);
        //             }
        //         }
        //     };
        //     img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
        // }

        // save restore
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');

        //     ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形
        //     ctx.save(); // 保存默认状态 不用这个下面fillRect会把所有颜色全部改掉

        //     ctx.fillStyle = '#09F' // 在原有配置基础上对颜色做改变
        //     ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形

        //     ctx.save(); // 保存当前状态
        //     ctx.fillStyle = '#FFF' // 再次改变颜色配置
        //     ctx.globalAlpha = 0.5;
        //     ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形

        //     ctx.restore(); // 重新加载之前的颜色状态
        //     ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形

        //     ctx.restore(); // 加载默认颜色配置
        //     ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
        // }

        // translate 方法使用 translate 方法同时让我们可以任意放置这些图案，而不需要在 fillRect() 方法中手工调整坐标值，既好理解也方便使用。
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');
        //     for (var i = 0; i < 3; i++) {
        //         for (var j = 0; j < 3; j++) {
        //             ctx.save();
        //             ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
        //             ctx.translate(10 + j * 50, 10 + i * 50);
        //             ctx.fillRect(0, 0, 25, 25);
        //             ctx.restore();
        //         }
        //     }
        // }

        //旋转 方法 旋转点始终为canvas原点，要改变需要使用translate
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');
        //     ctx.translate(75, 75);

        //     for (var i = 1; i < 6; i++) { // Loop through rings (from inside to out)
        //         ctx.save();
        //         ctx.fillStyle = 'rgb(' + (51 * i) + ',' + (255 - 51 * i) + ',255)';

        //         for (var j = 0; j < i * 6; j++) { // draw individual dots
        //             ctx.rotate(Math.PI * 2 / (i * 6));
        //             ctx.beginPath();
        //             ctx.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);
        //             ctx.fill();
        //         }

        //         ctx.restore();
        //     }
        // }

        // 缩放 scale(x ,y) 默认一个canvas像素单位为1 x如果为改变就说名x轴上每个像素单位被缩放为多少
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');

        //     // draw a simple rectangle, but scale it.
        //     ctx.save();
        //     ctx.scale(10, 3);
        //     ctx.fillRect(1, 10, 10, 10);
        //     ctx.restore();

        //     // mirror horizontally
        //     ctx.scale(-1, 1.5);
        //     ctx.font = '48px serif';
        //     ctx.fillText('MDN', -120, 120);
        //     //画布初始情况下， 是以左上角坐标为原点的第一象限。如果参数为负实数， 
        //     //相当于以x 或 y轴作为对称轴镜像反转（例如， 使用translate(0,canvas.height); scale(1,-1); 以y轴作为对称轴镜像反转， 就可得到著名的笛卡尔坐标系，左下角为原点）。
        // }

        // 变形 待研究
        // function draw() {
        //     var ctx = document.getElementById('canvas').getContext('2d');

        //     var sin = Math.sin(Math.PI / 6);
        //     var cos = Math.cos(Math.PI / 6);
        //     ctx.translate(100, 100);
        //     var c = 0;
        //     for (var i = 0; i <= 12; i++) {
        //         c = Math.floor(255 / 12 * i);
        //         ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
        //         ctx.fillRect(0, 0, 100, 10);
        //         ctx.transform(cos, sin, -sin, cos, 0, 0);
        //     }

        //     ctx.setTransform(-1, 0, 0, 1, 100, 100);
        //     ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
        //     ctx.fillRect(0, 50, 100, 100);
        // }

        // canvas画图方法之一clip （fill、stroke、clip）
        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.fillRect(0, 0, 150, 150);
            ctx.translate(75, 75);

            // Create a circular clipping path
            ctx.beginPath();
            ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
            ctx.clip();

            // draw background
            var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
            lingrad.addColorStop(0, '#232256');
            lingrad.addColorStop(1, '#143778');

            ctx.fillStyle = lingrad;
            ctx.fillRect(-75, -75, 150, 150);

            // draw stars
            for (var j = 1; j < 50; j++) {
                ctx.save();
                ctx.fillStyle = '#fff';
                ctx.translate(75 - Math.floor(Math.random() * 150),
                    75 - Math.floor(Math.random() * 150));
                drawStar(ctx, Math.floor(Math.random() * 4) + 2);
                ctx.restore();
            }

        }

        function drawStar(ctx, r) {
            ctx.save();
            ctx.beginPath()
            ctx.moveTo(r, 0);
            for (var i = 0; i < 9; i++) {
                ctx.rotate(Math.PI / 5);
                if (i % 2 == 0) {
                    ctx.lineTo((r / 0.525731) * 0.200811, 0);
                } else {
                    ctx.lineTo(r, 0);
                }
            }
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }
    </script> -->
    <!-- canvas动画 -->
    <!-- <script>
        // 太阳系动画 通过实时获取秒数，通过requestAnimationFrame每次更新来做动画
        // var sun = new Image();
        // var moon = new Image();
        // var earth = new Image();

        // function init() {
        //     sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
        //     moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
        //     earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
        //     window.requestAnimationFrame(draw);
        // }

        // function draw() {
        //     var ctx = document.getElementById('animate').getContext('2d');

        //     ctx.globalCompositeOperation = 'destination-over';
        //     ctx.clearRect(0, 0, 300, 300); // clear canvas

        //     ctx.fillStyle = 'rgba(0,0,0,0.4)';
        //     ctx.strokeStyle = 'rgba(0,153,255,0.4)';
        //     ctx.save();
        //     ctx.translate(150, 150);

        //     // Earth
        //     var time = new Date();
        //     ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
        //     ctx.translate(105, 0);
        //     ctx.fillRect(0, -12, 50, 24); // Shadow
        //     ctx.drawImage(earth, -12, -12);

        //     // Moon
        //     ctx.save();
        //     ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
        //     ctx.translate(0, 28.5);
        //     ctx.drawImage(moon, -3.5, -3.5);
        //     ctx.restore();

        //     ctx.restore();

        //     ctx.beginPath();
        //     ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
        //     ctx.stroke();

        //     ctx.drawImage(sun, 0, 0, 300, 300);

        //     window.requestAnimationFrame(draw);
        // }

        // init();

        // 时钟动画
        // function clock() {
        //     var now = new Date();
        //     var ctx = document.getElementById('canvas').getContext('2d');
        //     ctx.save();
        //     ctx.clearRect(0, 0, 150, 150);
        //     ctx.translate(75, 75);
        //     ctx.scale(0.4, 0.4);
        //     ctx.rotate(-Math.PI / 2);
        //     ctx.strokeStyle = "black";
        //     ctx.fillStyle = "white";
        //     ctx.lineWidth = 8;
        //     ctx.lineCap = "round";

        //     // Hour marks
        //     ctx.save();
        //     for (var i = 0; i < 12; i++) {
        //         ctx.beginPath();
        //         ctx.rotate(Math.PI / 6);
        //         ctx.moveTo(100, 0);
        //         ctx.lineTo(120, 0);
        //         ctx.stroke();
        //     }
        //     ctx.restore();

        //     // Minute marks
        //     ctx.save();
        //     ctx.lineWidth = 5;
        //     for (i = 0; i < 60; i++) {
        //         if (i % 5 != 0) {
        //             ctx.beginPath();
        //             ctx.moveTo(117, 0);
        //             ctx.lineTo(120, 0);
        //             ctx.stroke();
        //         }
        //         ctx.rotate(Math.PI / 30);
        //     }
        //     ctx.restore();

        //     var sec = now.getSeconds();
        //     var min = now.getMinutes();
        //     var hr = now.getHours();
        //     hr = hr >= 12 ? hr - 12 : hr;

        //     ctx.fillStyle = "black";

        //     // write Hours
        //     ctx.save();
        //     ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
        //     ctx.lineWidth = 14;
        //     ctx.beginPath();
        //     ctx.moveTo(-20, 0);
        //     ctx.lineTo(80, 0);
        //     ctx.stroke();
        //     ctx.restore();

        //     // write Minutes
        //     ctx.save();
        //     ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec)
        //     ctx.lineWidth = 10;
        //     ctx.beginPath();
        //     ctx.moveTo(-28, 0);
        //     ctx.lineTo(112, 0);
        //     ctx.stroke();
        //     ctx.restore();

        //     // Write seconds
        //     ctx.save();
        //     ctx.rotate(sec * Math.PI / 30);
        //     ctx.strokeStyle = "#D40000";
        //     ctx.fillStyle = "#D40000";
        //     ctx.lineWidth = 6;
        //     ctx.beginPath();
        //     ctx.moveTo(-30, 0);
        //     ctx.lineTo(83, 0);
        //     ctx.stroke();
        //     ctx.beginPath();
        //     ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
        //     ctx.fill();
        //     ctx.beginPath();
        //     ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
        //     ctx.stroke();
        //     ctx.fillStyle = "rgba(0,0,0,0)";
        //     ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
        //     ctx.fill();
        //     ctx.restore();

        //     ctx.beginPath();
        //     ctx.lineWidth = 14;
        //     ctx.strokeStyle = '#325FA2';
        //     ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
        //     ctx.stroke();

        //     ctx.restore();

        //     window.requestAnimationFrame(clock);
        // }

        // window.requestAnimationFrame(clock);

        // 全景图
        var img = new Image();

        // User Variables - customize these to change the image being scrolled, its
        // direction, and the speed.

        img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
        var CanvasXSize = 800;
        var CanvasYSize = 200;
        var speed = 30; //lower is faster
        var scale = 1.05;
        var y = -4.5; //vertical offset

        // Main program

        var dx = 0.75;
        var imgW;
        var imgH;
        var x = 0;
        var clearX;
        var clearY;
        var ctx;

        img.onload = function() {
            imgW = img.width * scale;
            imgH = img.height * scale;
            if (imgW > CanvasXSize) {
                x = CanvasXSize - imgW;
            } // image larger than canvas
            if (imgW > CanvasXSize) {
                clearX = imgW;
            } // image larger than canvas
            else {
                clearX = CanvasXSize;
            }
            if (imgH > CanvasYSize) {
                clearY = imgH;
            } // image larger than canvas
            else {
                clearY = CanvasYSize;
            }
            //Get Canvas Element
            ctx = document.getElementById('animate').getContext('2d');
            //Set Refresh Rate
            return setInterval(draw, speed);
        }

        function draw() {
            //Clear Canvas
            ctx.clearRect(0, 0, clearX, clearY);
            //If image is <= Canvas Size
            if (imgW <= CanvasXSize) {
                //reset, start from beginning
                if (x > (CanvasXSize)) {
                    x = 0;
                }
                //draw aditional image
                if (x > (CanvasXSize - imgW)) {
                    ctx.drawImage(img, x - CanvasXSize + 1, y, imgW, imgH);
                }
            }
            //If image is > Canvas Size
            else {
                //reset, start from beginning
                if (x > (CanvasXSize)) {
                    x = CanvasXSize - imgW;
                }
                //draw aditional image
                if (x > (CanvasXSize - imgW)) {
                    ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
                }
            }
            //draw image
            ctx.drawImage(img, x, y, imgW, imgH);
            //amount to move
            x += dx;
        }
    </script> -->
    <!-- 高阶动画 -->
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<!-- <body onload="window.draw ? draw() : '';"> -->

<body>
    <!-- <canvas id="tutorial" width="150" height="150"></canvas>
    <canvas id="canvas" width="200" height="200"></canvas>
    <canvas id="words" width="500" height="200"></canvas>
    <canvas id="animate" width="1000" height="1000"></canvas> -->
    <canvas id="ball" width="600" height="300"></canvas>
    <!-- <script>
        var canvas = document.getElementById('ball');
        var ctx = canvas.getContext('2d');
        var raf;
        var running = false;

        var ball = {
            x: 100,
            y: 100,
            vx: 5, // X 方向速度
            vy: 2, // Y方向速度
            radius: 25,
            color: 'skyblue',
            draw: function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
                // ctx.fillStyle = 'Orange'
                // ctx.fillText("阮慧婷", this.x, this.y);
                // ctx.font = "48px serif";
                ctx.closePath();
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        };

        function clear() {
            ctx.fillStyle = 'rgba(255,255,255,0.3)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        function draw() {
            clear()
                // ctx.clearRect(0, 0, canvas.width, canvas.height);
                // ctx.fillStyle = 'rgba(255,255,255,0.3)';
                // ctx.fillRect(0, 0, canvas.width, canvas.height); // 拖尾效果实现原因是一直增加一个白色的遮罩层盖在上面，原始路径由于白色遮罩多了就自动消失
                // debugger
            ball.draw();
            // ball.vy *= .99;
            // ball.vy += .25
            ball.x += ball.vx;
            ball.y += ball.vy;


            if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
                ball.vy = -ball.vy;
            }
            if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
                ball.vx = -ball.vx;
            }
            raf = window.requestAnimationFrame(draw);
            // setInterval(() => {
            //     draw()
            // }, 160)
        }

        canvas.addEventListener('mousemove', function(e) {
            if (!running) {
                clear();
                ball.x = e.clientX;
                ball.y = e.clientY;
                ball.draw();
            }
        });

        canvas.addEventListener('click', function(e) {
            if (!running) {
                raf = window.requestAnimationFrame(draw);
                running = true;
            }
        });

        // canvas.addEventListener('mouseover', function(e) {
        //     raf = window.requestAnimationFrame(draw);
        // });

        canvas.addEventListener('mouseout', function(e) {
            window.cancelAnimationFrame(raf);
            running = false;
        });

        ball.draw();
    </script> -->
    <script>
        var img = new Image();
        img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
        var canvas = document.getElementById('ball');
        var ctx = canvas.getContext('2d');
        img.onload = function() {
            ctx.drawImage(img, 0, 0);
            img.style.display = 'none';
        };
        var color = document.getElementById('color');

        function pick(event) {
            var x = event.layerX;
            var y = event.layerY;
            var pixel = ctx.getImageData(x, y, 1, 1);
            var data = pixel.data;
            var rgba = 'rgba(' + data[0] + ',' + data[1] +
                ',' + data[2] + ',' + (data[3] / 255) + ')';
            color.style.background = rgba;
            color.textContent = rgba;
        }
        canvas.addEventListener('mousemove', pick);
    </script>
</body>

</html>